* {
  margin: 0;
  padding: 0;
  list-style: none;
}
#bigCircle {
  width: 500px;
  height: 700px;
  margin:0 auto;
  position: relative;
}
#upCircle {
  width: 500px;
  height: 500px;
  border-radius: 50%;
  position: relative;
  box-shadow: 10px 10px 150px #ff0000 inset;
}
@keyframes rotate3d {
  0% {
    transform: rotateZ(-15deg) rotateY(0deg);
  }
  100% {
    transform: rotateZ(-15deg) rotateY(360deg);
  }
}
#upCircle .ball {
  height: 100%;
  transform-style: preserve-3d;
  animation: rotate3d 6s linear infinite;
}
#upCircle .ball > li {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
#upCircle .ball .line1 {
  transform: rotateY(0deg);
  text-align: center;
  border: 3px solid red;
  line-height: 100px;
  font-size: 30px;
  color: red;
}
#upCircle span {
  display: inline-block;
}
#upCircle .ball .line2 {
  transform: rotateY(60deg);
  border: 3px solid red;
}
#upCircle .ball .line3 {
  transform: rotateY(120deg);
  border: 3px solid red;
}
#upCircle .ball .line4 {
  transform: rotateY(180deg);
  border: 3px solid red;
}
#upCircle .ball .line5 {
  transform: rotateY(240deg);
  border: 3px solid red;
}
#upCircle .ball .line6 {
  transform: rotateY(300deg);
  border: 3px solid red;
}
#upCircle .ball-box {
  width: 100px;
  height: 100px;
  perspective: 3000px;
  position: absolute;
}
#upCircle .ball-box:nth-of-type(1) {
  left: 10%;
  top: 25%;
}
#upCircle .ball-box:nth-of-type(2) {
  left: 10%;
  top: 55%;
}
#upCircle .ball-box:nth-of-type(3) {
  right: 10%;
  top: 25%;
}
#upCircle .ball-box:nth-of-type(4) {
  right: 10%;
  top: 55%;
}
#upCircle .ball-box:nth-of-type(5) {
  top: 5%;
  left: 40%;
}
#upCircle .ball-box:nth-of-type(6) {
  top: 70%;
  left: 40%;
}
#upCircle .ball-box:nth-of-type(7) {
  top: 40%;
  left: 40%;
}
#upCircle .ball-box:nth-of-type(7) .ball {
  height: 100%;
  transform-style: preserve-3d;
  animation: rotate3d 6s linear infinite;
}
#upCircle .ball-box:nth-of-type(7) .ball > li {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
#upCircle .ball-box:nth-of-type(7) .ball .line1 {
  transform: rotateY(0deg);
  text-align: center;
  border: 3px solid blue;
  line-height: 100px;
  font-size: 30px;
  color: blue;
}
#upCircle .ball-box:nth-of-type(7) span {
  display: inline-block;
}
#upCircle .ball-box:nth-of-type(7) .ball .line2 {
  transform: rotateY(60deg);
  border: 3px solid blue;
}
#upCircle .ball-box:nth-of-type(7) .ball .line3 {
  transform: rotateY(120deg);
  border: 3px solid blue;
}
#upCircle .ball-box:nth-of-type(7) .ball .line4 {
  transform: rotateY(180deg);
  border: 3px solid blue;
}
#upCircle .ball-box:nth-of-type(7) .ball .line5 {
  transform: rotateY(240deg);
  border: 3px solid blue;
}
#upCircle .ball-box:nth-of-type(7) .ball .line6 {
  transform: rotateY(300deg);
  border: 3px solid blue;
}
#downCircle {
  width: 300px;
  height: 100px;
  position: absolute;
  top: 450px;
  left: 100px;
  background: red;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  text-align: center;
  line-height: 100px;
  font-size: 30px;
  color: #fff;
}
#footCircle {
  width: 500px;
  height: 50px;
  margin-top: 100px;
  line-height: 50px;
  font-size: 20px;
  font-weight: 600;
}
#footCircle p {
  border: 2px dotted gold;
}
#footCircle p span {
  width: 30px;
  height: 30px;
  border: 2px solid red;
  border-radius: 50%;
  display: inline-block;
  color: red;
  text-align: center;
  margin-left: 20px;
  line-height: 30px;
}
#footCircle p span:nth-of-type(7) {
  border: 2px solid blue;
  color: blue;
}
